<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七海后台管理系统</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <style>
        .green {
            color: green;
        }

        .red {
            color: tomato;
        }

        .gray {
            color: gray;
        }

        .photo {
            width: 300px;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .photo img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}

        <!-- 引入公共页面 -->
        {{include "./common/side-menu.html" }}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <span class="layui-breadcrumb" lay-separator="/">
                    <a href="/">首页</a>
                    <a href="/catelist">分类列表</a>
                </span>
               <div style="line-height: 50px;">
                   <a href="/addCate" class="layui-btn">添加分类</a>
               </div>
                <div>
                    <table align="center" width="1300px" border="1px" rules="all" class="layui-table">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td width="200px">分类名</td>
                                <td>是否显示前台</td>
                                <td>添加时间</td>
                                <td>更新时间</td>
                                <td>操作</td>

                            </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins//layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
<script>
    NProgress.configure({ showSpinner: true, });
    $(function () {
        loadCate();
    })
    const isShowTextMap = {
        0: "<span style='color:gray'>不显示</span>",
        1: "<span style='color:green'>显示</span>",
    }
    function loadCate() {
        NProgress.start();//进度条
        $.get('/getCateData', function (res) {
            NProgress.done();//关闭进度条
            // 构造tr标签内容
            let tbodyHtml = '';
            res.forEach((cate, index) => {
                let { cate_id, cate_name, is_show, add_date, update_date } = cate;
                is_show = isShowTextMap[is_show];
                tbodyHtml += `<tr>
                <td>${index + 1}</td>
                <td width="200px">${cate_name}</td>
                <td>${is_show}</td>
                <td>${add_date}</td>
                <td>${update_date}</td>
                <td>
                  <button type="button" data-catid='${cate_id}'  class="layui-btn  layui-btn-sm edit">编辑 <i class="layui-icon">&#xe642;</i></button>
                  <button type="button" data-catid='${cate_id}' class="layui-btn  layui-btn-sm  layui-btn-danger delete">删除  <i class="layui-icon">&#xe640;</i></button>
                </td>
          </tr>`
                $('#tbody').html(tbodyHtml)
            })

        }, 'json')
    }
    // 删除操作，动态绑定事件需要委托代理
    $('tbody').on('click', '.delete', function () {
        let _that = this;
        layer.confirm('是否删除', {
            btn: ['是的', '取消']
        }, function () {
            let cat_id = $(_that).attr('data-catid')
          $.post('/deleteCate', { cat_id }, function (res) {
                let { message, code } = res;
                layer.msg(message)
                if(code === 20000){
                    console.log('成功删除');
                    loadCate();
                }
            },'json')
        },function(){

        })
    })
//跳转到编辑页面
$('tbody').on('click','.edit',function(){
    let cat_id =$(this).attr('data-catid')
    location.href ="/editCate?cat_id="+cat_id;
})
</script>

</html>